<template>
<!-- 首页课程列表组件 -->
    <u-collapse :accordion="false" :show-line="showLine">
        <u-collapse-item class="collapse-item" v-for="(item, index) in chaper" :key="index"
            :index="index"
            @change="handleOpen"
            :disabled="disabled"
            :open="item.chaperChild.length>0">  <!--v-if="item.handout_total_num > 0 | item.video_total_length > 0"-->
            <template v-slot:header >
                <view class="collapse__header"
                :class="{ 'marginLeft': showLine }"
                @tap="handleClickHeader(item,index)">
                    <view class="collapse__header__left">
                        <view class="title" v-if="item.sort_desc==='零'">绪论 {{item.chaper_name}}</view>
                        <view class="title" v-else>{{ item.sort_desc ? `第${item.sort_desc}章` : '' }} {{item.chaper_name}}</view>

                        <view class="title_two" v-if="!disabled">已学习：{{item.study_length_desc}}</view>
                        <view class="title_two"  v-else>暂未开课哦~</view>
                    </view>
                    <view v-if="chaper_sections!==50">
                        <view class="cmd-circle" v-if="!disabled">
                            <cmd-progress :showInfo="false" :width="40" :percent="item.study_length_rate>100?100:item.study_length_rate" stroke-color="#29b3ff" type='circle'></cmd-progress>
                            <view class="cmd-circle-text" >
                                <view class="u-progress-dot">{{item.study_length_rate>100?100:item.study_length_rate}}%</view>
                            </view>
                        </view>
                        <view v-else class="study-lock iconfont-skin icon-lock"></view>
                    </view>
                </view>
            </template>
            <template v-slot:body>
                <view class="collapse__body">
                    <view
                            v-for="(item2, index2) in item.chaperChild"
                            :key="index2"
                            @tap="handleClickBody(item2,index)"
                            hover-class="none"
                            class="collapse__body__item">
                        <view class="collapse__body__li">
                            <view class="collapse__body__li_l"><view></view></view>
                            <view class="collapse__body__li_r">
                                <view class="collapse__body__li_txt">
                                    <view class="collapse__body__title">
                                        <text class="title__index">{{ index2 < 9 ? '0'+ (index2 + 1) : index2 + 1}}</text>{{chaper_sections === 50?item2.video_title:item2.video_name}}
                                    </view>
                                    <!-- 如果类型是视频讲义 则不显示播放条进度  -->
                                    <view v-if="chaper_sections === 10" class="collapse__body__progress iconfont " :class="[playId === item2.id ? 'iconjindu': '']">
                                        <text class="collapse__progress__time">{{formatSeconds(item2.video_length)}}</text>
                                        <u-line-progress class="collapse__progress" activeColor="linear-gradient(90deg, #36C0FF, #1A93FE)"  :percent="item2.is_study === 2 ? 0 : ((item2.video_study_detail.video_study_length/item2.video_length)*100)"></u-line-progress>
                                        <text class="collapse__progress__status">已学{{item2.is_study === 2 ? 0 : item2.study_length_rate}}%</text>
                                    </view>
                                </view>
                                <view v-if="chaper_sections === 10" class="icon-s fontCA-skin2 iconfont-skin icon-bofang3"></view>
                            </view>
                        </view>
                    </view>
                </view>
            </template>
        </u-collapse-item>
    </u-collapse>
</template>

<script>
	/**
	 * studyCatalog 课程目录组件 可与 lesson-catalog 配合使用(未完善)
	 */
    import uCollapse from '@/components/collapse/collapse'
    import uCollapseItem from '@/components/collapse-item-skin/collapse-item'
    import uCircleProgress from '@/components/u-circle-progress/u-circle-progress'
    import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
    import uLineProgress from '@/components/u-line-progress/u-line-progress'
    import { formatSeconds } from '@/utils/timeFormat'
    import { getChaperClass, getChaper, getHandout } from '@/api/index'
    import { getChapeVideoNote } from '@/api/playVideo'
    import { mapGetters, mapActions } from 'vuex'
	export default {
        name: 'studyCatalog',
        components: {
            uCircleProgress,
            uLineProgress,
            uCollapse,
            uCollapseItem,
            cmdProgress
        },
        computed: {
		},
        props: {
            courses_id: {
                type: Number ,
                required: true
            },
            chaper_sections: {
                type: Number ,
                default: -1
            },
            disabled: {
                type: Boolean ,
                default: false
            },
            // 正在播放的视频id
            playId: {
                type: Number ,
                default: -1
            },
            handleIndex:{
                type:Number,
                default:-1
            }

        },
		data() {
			return {
                chaper: [],
                showLine: true
			}
        },
        watch: {
			chaper_sections(e) {
                switch(e) {
                    case 10:
                    // 视频
                    this.showLine = true
                    case 20:
                    // 讲义
                    this.showLine = true
                    break;
                    case 30:
                    // 练习
                    this.showLine = false
                    break;
                }
                this.getData()
            },
            courses_id() {
                this.getData()
            }
        },
        onLoad(){

        },
        mounted() {
            if(this.chaper_sections===30){
                this.showLine=false
            }
            this.getData();
        },
		methods: {
            formatSeconds,
            getData() {

                const { courses_id, chaper_sections } = this
                this.chaper = []
                getChaperClass({ courses_id, chaper_section:chaper_sections })
                .then(res => {
                    if(res.length>0){
                        res.forEach(element => {
                            element.chaperChild = []

                        });
                    }
                    this.$nextTick(_ => {
                        this.chaper = res
                       /*  if(this.chaper_sections===30){
                            this.chaperStudyNum();
                        } */
                        if(this.handleIndex>-1){
                            this.handleOpen({index:this.handleIndex,show:true})
                        }

                    })
                })
            },
            // 点击打开父级
            handleOpen({ index, show }) {
				if(show) {
                    const { id } = this.chaper[index]
                    //this.handleIndex=index
                    switch(this.chaper_sections) {
                        // 获取视频
                        case 10:
                        getChaper({ chaper_id: id }).then(res => {
                            this.chaper[index].chaperChild = res
                            console.log(this.chaper[index].chaperChild)
                        })
                        break;
                        // 获取讲义
                        case 20:
                        getHandout({ chaper_id: id }).then(res => {
                            this.chaper[index].chaperChild = res
                        })
                        break;
                        // 获取练习
                        case 30:
                        // this.getVideoData();
                        break;
                        case 50:
                            getChapeVideoNote({chaper_id: id}).then(res=>{
                                this.chaper[index].chaperChild = res.data
                            })
                        break;
                    }

				}
            },
            // 点击打开子集
            handleClickBody(item,index){
                this.$emit('handleclickbody',item,index)
            },
            // 点击父集
            handleClickHeader(item,index){
                this.$emit('handleclickheader',item,index)
            },

		}
	}
</script>

<style lang="scss" scope>
    .collapse-item{
        background: #fff;
        margin-bottom: 20rpx;
    }
    .collapse__body__li{
        position: relative;
        display: flex;
        flex-direction: row;
        .collapse__body__li_l{
            position: absolute;
            transition: 0.3s;
            left: 0rpx;
            top: 11rpx;
            z-index: 99;
            margin-left: -72rpx;
            margin-right: 40rpx;
            width: 20rpx;
            height: 20rpx;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            view{
                width: 12rpx;
                height: 12rpx;
                background: #999;
                border-radius: 6rpx;
            }
        }
        .collapse__body__li_r{
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            .collapse__body__li_txt{
                display: flex;
                flex-direction: column;
            }
            .icon-s{
                font-size: 56rpx;
            }
        }
    }
.collapse__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    &.marginLeft{
        margin-left: 66rpx;
    }
    .collapse__header__left{
        flex: 1;
        overflow: hidden;
        .title{
            color: #333;
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
            white-space:nowrap;/*规定段落中的文本不进行换行*/
            overflow:hidden;/*内容会被修剪，并且其余内容是不可见的。*/
            text-overflow:ellipsis;/*显示省略号来代表被修剪的文本*/
        }
        .title_two{
            font-size: 28rpx;
            color: #999;
            font-weight:500;
        }
    }
    .cmd-circle{
        display: flex;
        justify-content: center;
        position: relative;
        .cmd-circle-text{
           position: absolute;text-align: center;top: 30%;
            .u-progress-dot{
                font-size: 24rpx;
                font-weight:bold;
                background: linear-gradient(45deg, #36C0FF 0%, #1A93FE 100%);
                -webkit-background-clip: text;
                color: transparent;
            }
        }
    }
    .study-lock{
        width: 80rpx;
        height: 80rpx;
        font-size: 40rpx;
        color: #dedede;
        text-align: center;
        line-height: 80rpx;
    }
}
.collapse__body__item{
    margin-left: 109rpx;
    margin-right: 24rpx;
    padding: 20rpx 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .collapse__body__title{
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
        margin-bottom: 20rpx;
        .title__index{
            color: #999;
            margin-right: 10rpx;
            font-style:oblique;
        }
    }
    .collapse__body__progress{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 22rpx;
        .collapse__progress{
            width: 278rpx;
        }
        .collapse__progress__paly{
            width: 48rpx;
            height: 48rpx;
        }
        .collapse__progress__time{
            color: #999;
            width: 94rpx
        }
        .collapse__progress__status{
            margin-left: 10rpx;
            color: #999;
            width: 120rpx;
        }
        &::after{
            font-size: 48rpx;
            position: relative;
            bottom: 12rpx;
            color: $uni-color-primary;
        }
    }
}
</style>
